<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
      <el-form-item label="订单号" prop="id">
        <el-input v-model="queryParams.id" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="客户姓名" prop="userName">
        <el-input v-model="queryParams.userName" placeholder="请输入客户姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phoneNumber">
        <el-input v-model="queryParams.phoneNumber" placeholder="请输入联系电话" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <!-- 技师名称 -->
      <el-form-item label="技师名称" prop="technicianName">
        <el-input v-model="queryParams.technicianName" placeholder="请输入技师名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- 订单号/所属区域/所属门店、 -->
      <el-form-item label="所属区域" prop="regionId">
        <el-select clearable v-model="queryParams.regionId" @change="searchRegionChange">
          <el-option v-for="(item, index) of regionOption" :key="index" :label="item.label" :value="item.value">{{
            item.label }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属门店" prop="storeId">
        <!-- @change="searchStoreIdFun" -->
        <el-select clearable v-model="queryParams.storeId">
          <el-option v-for="(item, index) of searchStoreOption" :key="index" :label="item.label" :value="item.value">{{
            item.label }}
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 项目名称、 -->
      <el-form-item label="项目名称" prop="itemName">
        <!-- <el-select clearable v-model="queryParams.itemName">
          <el-option v-for="(item, index) of proItemNameArr" :key="index" :label="item.label" :value="item.value">{{
            item.label }}
          </el-option>
        </el-select> -->
        <el-input v-model="queryParams.itemName" placeholder="请输入项目名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="优惠劵名称" prop="couponName">
        <!-- <el-select clearable v-model="queryParams.couponName">
          <el-option v-for="(item, index) of couponNameArr" :key="index" :label="item.label" :value="item.value">{{
            item.label }}
          </el-option>
        </el-select> -->
        <el-input v-model="queryParams.couponName" placeholder="请输入优惠劵名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="储值卡名称" prop="valueCardName">
        <!-- <el-select clearable v-model="queryParams.valueCardName">
          <el-option v-for="(item, index) of valueCardNameArr" :key="index" :label="item.label" :value="item.value">{{
            item.label }}
          </el-option>
        </el-select> -->
        <el-input v-model="queryParams.valueCardName" placeholder="请输入储值卡名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="会员卡名称" prop="memberCardName">
        <!-- <el-select clearable v-model="queryParams.memberCardName">
          <el-option v-for="(item, index) of memberCardNameArr" :key="index" :label="item.label" :value="item.value">{{
            item.label }}
          </el-option>
        </el-select> -->
        <el-input v-model="queryParams.memberCardName" placeholder="请输入会员卡名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <!-- 订单状态、
      储值卡名称、
      会员权益名称、 -->

      <!-- 订单来源、 -->
      <el-form-item label="订单来源" prop="orderSource">
        <el-select clearable v-model="queryParams.orderSource">
          <el-option v-for="(item, index) of orderSourceList" :key="index" :label="item.label" :value="item.value">{{
            item.label }}
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 支付方式、 -->
      <el-form-item label="支付方式" prop="paymentType">
        <el-select clearable v-model="queryParams.paymentType">
          <el-option v-for="(item, index) of payMentList" :key="index" :label="item.label" :value="item.value">{{
            item.label }}
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 支付状态、 -->
      <el-form-item label="预约时间">
        <el-date-picker v-model="queryParams.subTimeParam" style="width: 240px" value-format="yyyy-MM-dd"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>

      <el-form-item label="服务时间">
        <el-date-picker v-model="queryParams.serviceTimeParam" style="width: 240px" value-format="yyyy-MM-dd"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>

      <el-form-item label="创建时间">
        <el-date-picker v-model="queryParams.createTimeParam" style="width: 240px" value-format="yyyy-MM-dd"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="支付时间">
        <el-date-picker v-model="queryParams.paymentTimeParam" style="width: 240px" value-format="yyyy-MM-dd"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
          v-hasPermi="['business:order:query']">搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10">
      <el-button :type="0 === selectedKey ? 'success' : 'primary'" plain style="margin-right: 10px"
        @click="buttonClick(0)">
        待支付
      </el-button>

      <el-col :span="1.5">
        <el-button type="danger" plain @click="clickOpenOrder" v-hasPermi="['business:order:invoicing']">开单</el-button>
      </el-col>

      <el-col :span="1.5" v-for="(item, index) in state" :key="index">
        <el-button :type="item.key == selectedKey ? 'success' : 'primary'" plain style="margin-right: 10px"
          @click="handleButtonClick(item.key)">
          {{ item.value }}
        </el-button>
      </el-col>
    </el-row>
    <el-col class="el-col--right">
      <!-- <el-button type="warning" plain @click="openRoom">开包间</el-button> -->
    </el-col>
    <el-table v-loading="loading" :data="storeList" max-height="650px" @selection-change="handleSelectionChange"
      @expand-change="handleExpandChange" :row-class-name="tableRowClassName">
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column type="expand">
        <template #default="scope">
          <div m="4" style="margin-left: 100px" :key="scope.row.key">
            <el-table :data="childRowData[scope.row.id]">
              <el-table-column label="项目名称" prop="itemName" width="120" />
              <el-table-column
                label="技师名称"
                prop="technicianName"
                width="120"
              />
              <el-table-column
                label="项目金额"
                prop="paymentMoney"
                width="200"
              />
              <el-table-column
                label="附加商品金额"
                prop="productMoney"
                width="120"
              />
              <el-table-column
                label="项目开始时间"
                prop="subscribeStartTime"
                width="150"
              />
              <el-table-column
                label="项目结束时间"
                prop="subscribeEndTime"
                width="150"
              />
              <el-table-column
                v-if="scope.row.orderStatus == 1"
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                width="150"
              >
                <template #default="rowScope">
                  <el-button
                    v-if="rowScope.row.status != 5"
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="clickOutProject(rowScope.row)"
                  >退单</el-button>
                </template>
</el-table-column>
</el-table>
</div>
</template>
</el-table-column> -->
      <el-table-column label="订单号" align="center" width="110px" prop="id" />
      <el-table-column label="区域名称" align="center" :show-overflow-tooltip="true" prop="regionName" />
      <el-table-column label="门店名称" align="center" :show-overflow-tooltip="true" prop="storeName" />

      <el-table-column label="客户姓名" align="center" width="110px" prop="userName" />
      <el-table-column label="客户电话" align="center" width="110px" prop="phoneNumber" />

      <el-table-column label="技师名称" align="center" :show-overflow-tooltip="true" prop="technicianName" />
      <el-table-column label="技师头像" align="center" prop="picture" width="160">
        <template slot-scope="scope">
          <image-preview :src="scope.row.technicianAvatar" :width="50" :height="50" />
        </template>
      </el-table-column>


      <el-table-column label="本次收益" align="center" :show-overflow-tooltip="true" prop="techEarnings" />
      <el-table-column label="消费次数" align="center" prop="serviceOrderCounts">
        <template slot-scope="scope">
          <span>共{{ scope.row.serviceOrderCounts }}次,我服务过{{
            scope.row.serviceOrderItemCounts
          }}次</span>
        </template>
      </el-table-column>

      <el-table-column label="项目名称" align="center" :show-overflow-tooltip="true" prop="itemName" />
      <el-table-column label="项目付款金额" align="center" :show-overflow-tooltip="true" prop="paymentMoney" />
      <el-table-column label="预约开始时间" align="center" :show-overflow-tooltip="true" prop="subStartTime" />
      <el-table-column label="预约结束时间" align="center" :show-overflow-tooltip="true" prop="subEndTime" />

      <el-table-column label="服务开始时间" align="center" :show-overflow-tooltip="true" prop="serviceStartTime" />
      <el-table-column label="服务结束时间" align="center" :show-overflow-tooltip="true" prop="serviceEndTime" />




      <el-table-column label="服务状态" align="center" prop="status">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1">待服务</span>
          <span v-if="scope.row.status == 2">服务中</span>
          <span v-if="scope.row.status == 3">待评价</span>
          <span v-if="scope.row.status == 4">已完成</span>
          <span v-if="scope.row.status == 5">已退单</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="服务开始时间" align="center" prop="orderSource" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.status > 1  ? scope.row.serviceStartTime : "" }}</span>
        </template>
      </el-table-column>

      <el-table-column label="服务结束时间" align="center" prop="orderSource" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ (scope.row.status == 3 ||  scope.row.status == 4 )? scope.row.serviceEndTime : "" }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="订单来源" align="center" prop="orderSource" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.orderSource == 1">小程序</span>
          <span v-if="scope.row.orderSource == 2">管理端</span>
          <span v-if="scope.row.orderSource == 3">技师端</span>
        </template>
      </el-table-column>

      <el-table-column label="包间名称" align="center" :show-overflow-tooltip="true" prop="compartmentName" />
      <el-table-column label="包间金额" align="center" prop="compartmentMoney" width="120">
        <template slot-scope="scope">
          <span>{{
            scope.row.compartmentMoney === null
              ? "无"
              : scope.row.compartmentMoney
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称×数量" align="center" :show-overflow-tooltip="true" prop="productName" />
      <el-table-column label="商品金额" align="center" :show-overflow-tooltip="true" prop="productPrice" />
      <el-table-column label="退单金额" align="center" :show-overflow-tooltip="true" prop="chargebackMoney" />
      <el-table-column label="卡类型" align="center" prop="cardType" width="120">
        <template slot-scope="scope">
          {{ cardType[scope.row.cardType] }}
        </template>
      </el-table-column>
      <el-table-column label="支付状态" align="center" prop="payStatus" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.payStatus == 1 ? "未支付" : "已支付" }}</span>
        </template>
      </el-table-column>

      <el-table-column label="评价状态" align="center" prop="payStatus" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 4" style="color: green;">已评价</span>
          <span v-if="scope.row.status != 4">未评价</span>
        </template>
      </el-table-column>


      <el-table-column label="优惠券名称" align="center" :show-overflow-tooltip="true" prop="couponName" />

      <el-table-column label="优惠券优惠金额" align="center" :show-overflow-tooltip="true" prop="paymentMoney">

        <template slot-scope="scope">
          <span>{{ (Number(scope.row.couponDiscounts)).toFixed(2)}}</span>
        </template>

      </el-table-column>

      <el-table-column label="卡抵扣金额" align="center" :show-overflow-tooltip="true" prop="paymentMoney">
        <template slot-scope="scope">
          <span>{{ Number(scope.row.memberDiscounts) + Number(scope.row.valueCardDiscounts) }}</span>
        </template>
      </el-table-column>


      <el-table-column label="实付金额" align="center" :show-overflow-tooltip="true" prop="paymentMoney">

        <template slot-scope="scope">
          <span>{{ Number(scope.row.paymentMoney) + Number(scope.row.productPrice) }}</span>
        </template>

      </el-table-column>

      <el-table-column label="支付时间" align="center" :show-overflow-tooltip="true" prop="paymentTime" />

      <el-table-column label="支付方式" align="center" prop="paymentType" width="120">
        <template slot-scope="scope">
          {{
            scope.row.paymentType == "1"
              ? "微信"
              : scope.row.paymentType == "2"
                ? "支付宝"
                : scope.row.paymentType == "3"
                  ? "现金"
                  : scope.row.paymentType == "4"
                    ? "银行卡"
                    : scope.row.paymentType == "5"
                      ? "店铺储蓄卡"
                      : "其他"
          }}
        </template>
      </el-table-column>

      <el-table-column label="支付交易号" align="center" :show-overflow-tooltip="true" prop="transactionId">
      </el-table-column>
      <el-table-column label="团购券id" align="center" :show-overflow-tooltip="true" prop="groupPurchaseId" />
      <el-table-column label="订单创建时间" align="center" prop="createTime" width="200" />
      <!-- <el-table-column label="订单金额" align="center" prop="itemMoney" />
      <el-table-column label="优惠金额" align="center" prop="discountsMoney" />
      <el-table-column label="实付金额" align="center" prop="actuallyMoney" />
      <el-table-column
        label="使用会员卡"
        align="center"
        prop="isMember"
        width="120"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.isMember == "1" ? "使用" : "未使用" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="使用储值卡"
        align="center"
        prop="isValue"
        width="120"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.isValue == "1" ? "使用" : "未使用" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="订单状态"
        align="center"
        prop="orderStatus"
        width="120"
      >
        <template slot-scope="scope">
          {{
            scope.row.orderStatus == "1"
              ? "待服务"
              : scope.row.orderStatus == "2"
              ? "服务中"
              : scope.row.orderStatus == "3"
              ? "待评价"
              : scope.row.orderStatus == "4"
              ? "已完成"
              : "已退单"
          }}
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="250">
        <template slot-scope="scope">
          <!-- 支付状态  payStatus  1 未支付  2 已支付 -->
          <!-- 服务状态  status  1 待服务 2 服务中  3 待评价  4  已完成 5 退单 6 取消 -->
          <!-- 客户需求（已确认）：
          待支付、待服务；支付，上钟，修改，删除
          待支付、服务中；支付，下钟，修改、删除
          待支付、待评价；支付、修改、删除
          已支付，待服务，上钟，修改，退单，删除
          已支付、服务中，下钟，修改、退单，删除
          已支付，待评价；退单、修改、删除
          已完成，退单，修改，删除
          已退单，删除 -->
          <el-button v-if="
            (scope.row.payStatus == 1 && scope.row.status == 1) ||
            (scope.row.payStatus == 1 && scope.row.status == 2) ||
            (scope.row.payStatus == 1 && scope.row.status == 3)
          " size="mini" type="text" @click="handReset(scope.row)" v-hasPermi="['business:order:pay']">支付
          </el-button>

          <el-button v-if="
            (scope.row.payStatus == 1 && scope.row.status == 1) ||
            (scope.row.payStatus == 2 && scope.row.status == 1)
          " size="mini" type="text" @click="handupdateOrderItem(scope.row.itemId, 2)"
            v-hasPermi="['business:order:ClockIn']">上钟
          </el-button>

          <el-button v-if="
            (scope.row.payStatus == 1 && scope.row.status == 2) ||
            (scope.row.payStatus == 2 && scope.row.status == 2)
          " size="mini" type="text" @click="handupdateOrderItem(scope.row.itemId, 3)"
            v-hasPermi="['business:order:ClockIn']">下钟
          </el-button>

          <el-button v-if="scope.row.status < 5" size="mini" type="text" v-hasPermi="['business:order:edit']"
            @click="handleUpdateOrder(scope.row)">
            修改
          </el-button>

          <el-button v-if="
            (scope.row.payStatus == 2 && scope.row.status == 1) ||
            (scope.row.payStatus == 2 && scope.row.status == 2) ||
            (scope.row.payStatus == 2 && scope.row.status == 3) ||
            (scope.row.payStatus == 2 && scope.row.status == 4)
          " size="mini" type="text" @click="clickOutOrder(scope.row)" v-hasPermi="['business:order:chargeback']">退单
          </el-button>

          <el-button size="mini" type="text" @click="handleDelete(scope.row)" v-hasPermi="['business:order:del']">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getOrderList" />
    <!-- 开单 -->
    <el-dialog title="开单" :visible.sync="orderVisible" width="900px" append-to-body :close-on-click-modal="false"
      @close="orderClose">
      <el-form ref="orderFormRef" :model="orderForm" :rules="orderRules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="归属区域" prop="regionId">
              <el-select clearable v-model="orderForm.regionId" @change="regionChange">
                <el-option v-for="(item, index) of regionOption" :key="index" :label="item.label" :value="item.value">{{
                  item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属门店" prop="storeId">
              <el-select clearable v-model="orderForm.storeId" @change="storeIdChange">
                <el-option v-for="(item, index) of storeOption" :key="index" :label="item.label" :value="item.value">{{
                  item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户电话" prop="phoneNumber">
              <el-input v-model="orderForm.phoneNumber" placeholder="请输入客户电话" style="width: 222px"
                @blur="phoneChange" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="userName">
              <el-input v-model="orderForm.userName" placeholder="请输入客户名称" style="width: 222px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="余额" prop="valueMoney">
              <!-- <el-input disabled v-model="orderForm.valueMoney" style="width: 222px" /> -->
              {{ orderForm.valueMoney }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会员权益" prop="memberFlag">
              <!-- <el-select clearable disabled v-model="orderForm.memberFlag">
                <el-option label="{{orderForm.ruleName}}" value="1"></el-option>
                <el-option label="否" value="2">无</el-option>
              </el-select> -->
              <span v-if="orderForm.memberFlag == 1">{{
                orderForm.memberCardName
              }}</span>
              <span v-if="orderForm.memberFlag != 1">无</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目">
              {{
                `需优先选择区域与门店信息（已添加项目：${zyOrderItemList.length}）`
              }}
              <!-- <el-button type="primary" plain @click="clickChooseProject">
                {{ zyOrderItemList.length ? `添加项目(${zyOrderItemList.length})` : '选择项目' }}
              </el-button> -->
            </el-form-item>
          </el-col>
        </el-row>
        <div class="project-form">
          <el-form ref="projectFormRef" :model="projectForm" :rules="projectRules" label-width="100px">
            <el-form-item label="项目分类" prop="typeId">
              <el-select clearable v-model="projectForm.typeId" @change="typeChange">
                <el-option v-for="(item, index) of pullDown" :key="index" :label="item.label" :value="item.value">{{
                  item.label }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="服务项目" prop="projectId" placeholder="请选择服务项目">
              <el-select clearable v-model="projectForm.projectId" @change="projectChange">
                <el-option v-for="(item, index) of projectOption" :key="index" :label="item.label"
                  :value="item.value">{{
                    item.label }}
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="附加商品" prop="goods" placeholder="请选择附加商品">
              <el-select clearable v-model="projectForm.goods" @change="goodsChange">
                <el-option v-for="(item, index) of goodsOption" :key="index" :label="item.label" :value="item.value">{{
                  item.label }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择时间" prop="chooseTime">
              <el-date-picker v-model="projectForm.chooseTime" :disabled="!projectForm.projectId" type="datetime"
                value-format="yyyy-MM-dd HH:mm" placeholder="请选择时间" @change="chooseTimeChange"
                :picker-options="pickerOptions"></el-date-picker>
            </el-form-item>
            <el-form-item label="服务技师" prop="technicianId" placeholder="请选择服务技师">
              <el-select clearable v-model="projectForm.technicianId" @change="technicianChange">
                <!-- :disabled="item.status == '休息'" -->
                <el-option v-for="(item, index) of technicianOption" :disabled="item.status == '休息'" :key="index"
                  :label="item.label" :value="item.value">{{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="add-project-btn">
          <el-button type="primary" plain size="small" @click="clickAddProject">添加服务项目</el-button>
        </div>
        <div class="project-list" v-if="zyOrderItemList && zyOrderItemList.length">
          <div class="project-item" v-for="(item, index) in zyOrderItemList" :key="index">
            <div class="common-item">
              <div class="item">{{ item.itemName }}</div>
              <div class="item">
                {{
                  item.zyOrderProductList
                    ? item.zyOrderProductList[0].productName
                    : ""
                }}
              </div>
            </div>
            <div class="common-item">
              <div class="item">{{ item.technicianName }}</div>
              <div class="item">{{ item.subscribeStartTime }}</div>
            </div>
            <div class="delete-box">
              <el-button size="mini" type="danger" @click="clickDeleteProject(item, index)">删除</el-button>
            </div>
          </div>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="包间类型" prop="roomType">
              <el-select clearable v-model="orderForm.roomType" @change="needRoomChange">
                <el-option label="包间" value="1">包间</el-option>
                <el-option label="床位" value="2">床位</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="orderForm.roomType">
            <!--  === '1'-->
            <el-form-item label="选择包间" prop="compartmentId">
              <el-select clearable v-model="orderForm.compartmentId" @change="roomChange">
                <el-option v-for="(item, index) of roomOptions" :key="index" :label="item.label" :value="item.value">{{
                  item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="优惠方式" prop="discountType">
              <el-select clearable :disabled="!(
                regionId &&
                storeId &&
                zyOrderItemList.length &&
                orderForm.phoneNumber
              )
                " v-model="orderForm.discountType" @change="discountTypeChange">
                <el-option label="无" value="">无</el-option>
                <el-option label="会员权益" value="member" v-if="orderForm.memberFlag === '1'">会员权益</el-option>
                <el-option label="储值卡" value="storeCard" v-if="orderForm.valueFlag === '1'">储值卡</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠券" prop="itemZyUserCouponId">
              <el-select clearable v-model="orderForm.itemZyUserCouponId" @change="couponChange">
                <el-option v-for="(item, index) of couponOptions" :key="index" :label="item.label"
                  :value="item.value">{{
                    item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="支付方式" prop="paymentType" v-if="orderVisible">
          <el-select clearable v-model="orderForm.paymentType" @change="changePaymentType">
            <el-option v-for="(item, index) of payMentList" :key="index" :label="item.label" :value="item.value">{{
              item.label }}
            </el-option>
            <!-- <el-option v-if="paymentForm.reduced == '会员权益'" label="现金" value="3">现金</el-option>
                <el-option label="余额" value="5">余额</el-option>
                <el-option v-if="paymentForm.reduced == '会员权益'" label="扫码支付" value="7">扫码支付</el-option>
                <el-option v-if="paymentForm.reduced == '会员权益'" label="团购券" value="8">团购券</el-option> -->
          </el-select>
        </el-form-item>
        <el-row v-if="orderForm.paymentType === '8'">
          <el-col :span="12">
            <el-form-item label="券码" prop="groupPurchaseId">
              <el-input v-model="orderForm.groupPurchaseId" placeholder="请输入券码" style="width: 222px" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实收金额" prop="groupPurchaseMoney">
              <el-input v-model="orderForm.groupPurchaseMoney" placeholder="请输入实收金额" style="width: 222px" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="box-flex">
        <div class="account-box">
          <div class="account-item" v-for="(item, index) in accountConfig" :key="index">
            <div class="account-label">{{ item.label }}</div>
            <!-- <div class="account-value">{{ feeKeys(item.value) || '--' }}元</div> -->
            <div class="account-value">{{ feeKeys(item.value) || 0 }}元</div>
          </div>
        </div>

        <div class="account-box">
          <div class="account-item" v-if="orderForm.discountType == 'member'">
            <div class="account-label">会员折扣</div>
            <div class="account-value">
              {{ couponItem.memberDiscounts || 0 }}元
            </div>
          </div>
          <div class="account-item" v-if="orderForm.discountType == 'storeCard'">
            <div class="account-label">储蓄卡折扣</div>
            <div class="account-value">
              {{ couponItem.valueCardDiscounts || 0 }}元
            </div>
          </div>
          <div class="account-item">
            <div class="account-label">优惠券折扣</div>
            <div class="account-value">
              {{ couponItem.couponDiscount || 0 }}元
            </div>
          </div>
          <div class="account-item">
            <div class="account-label">总优惠金额</div>
            <div class="account-value">{{ couponItem.discount || 0 }}元</div>
          </div>
          <div class="account-item">
            <div class="account-label">实付金额</div>
            <div class="account-value">
              {{ couponItem.discountAmount || 0 }}元
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="laterSubmit">稍后支付</el-button>
        <el-button type="primary" @click="clickSubmit" :loading="clickSubmitButton">立即支付</el-button>
        <el-button @click="clickCancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加项目表单 -->
    <el-dialog title="添加项目" :visible.sync="addProVisible" width="500px" append-to-body :close-on-click-modal="false"
      @close="projectClose">
      <div class="add-project-body">
        <div class="project-form">
          <el-form ref="projectFormRef" :model="projectForm" :rules="projectRules" label-width="100px">
            <el-form-item label="服务项目" prop="projectId" placeholder="请选择服务项目">
              <el-select clearable v-model="projectForm.projectId" @change="projectChange">
                <el-option v-for="(item, index) of projectOption" :key="index" :label="item.label"
                  :value="item.value">{{
                    item.label }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="附加商品" prop="goods" placeholder="请选择附加商品">
              <el-select clearable v-model="projectForm.goods" @change="goodsChange">
                <el-option v-for="(item, index) of goodsOption" :key="index" :label="item.label" :value="item.value">{{
                  item.label }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择时间" prop="chooseTime">
              <el-date-picker v-model="projectForm.chooseTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择时间" @change="chooseTimeChange"></el-date-picker>
            </el-form-item>
            <el-form-item label="服务技师" prop="technicianId" placeholder="请选择服务技师">
              <el-select clearable v-model="projectForm.technicianId" @change="technicianChange">
                <el-option v-for="(item, index) of technicianOption" :key="index" :label="item.label"
                  :value="item.value">{{
                    item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="add-project-btn">
          <el-button type="primary" plain size="small" @click="clickAddProject">添加服务项目</el-button>
        </div>
        <div class="project-list" v-if="zyOrderItemList && zyOrderItemList.length">
          <div class="project-item" v-for="(item, index) in zyOrderItemList" :key="index">
            <div class="common-item">
              <div class="item">{{ item.itemName }}</div>
              <div class="item">
                {{
                  item.zyOrderProductList
                    ? item.zyOrderProductList[0].productName
                    : ""
                }}
              </div>
            </div>
            <div class="common-item">
              <div class="item">{{ item.technicianName }}</div>
              <div class="item">{{ item.subscribeStartTime }}</div>
            </div>
            <div class="delete-box">
              <el-button size="mini" type="danger" @click="clickDeleteProject(item)">删除</el-button>
            </div>
          </div>
        </div>
        <div class="confirm-project">
          <el-button type="primary" class="confirm-project" @click="confirmProject">确认选择项目</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog :title="commonTitle" :visible.sync="commonVisible" :width="commonTitle === '退单' ? '800px' : '500px'"
      append-to-body :close-on-click-modal="false" @close="closeCommonVisible">
      <div v-if="commonTitle === '支付'">
        <div class="pay-box">
          <div class="pay-item">
            支付方式：{{ payTypeConfig[orderForm.paymentType] }}
          </div>
          <div class="pay-item">实付金额：{{ actuallyMoney }}元</div>
          <div class="column-center">
            <el-input v-if="orderForm.paymentType == '7'" style="width: 200px; margin: 20px 0" v-model="scanCode"
              clearable placeholder="请输入支付码" @change="handleScanCode" ref="code"></el-input>
            <el-button type="primary" class="confirm-pay-btn" @click="clickSurePay"
              :loading="clickSurePayButton">确定收款</el-button>
          </div>
        </div>
      </div>
      <div v-if="commonTitle === '删除项目'">是否确认删除该项目？</div>
      <div v-if="commonTitle === '项目退单'">
        退单可能会扣除一些损耗费，确认要申请退单吗？
      </div>
      <el-form v-if="commonTitle === '退单'" ref="form" :model="form" :rules="outRules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="理由" prop="userName">
              <el-input v-model="remarked" placeholder="请输入理由" style="width: 222px" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退款比例" prop="beChargebackRatio">
              <el-input v-model="form.beChargebackRatio" placeholder="请输入退款比例(1-100)" style="width: 222px" />(单位:%)
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- <el-form v-if="commonTitle === '项目退单'" ref="projectRefundForm" :model="projectRefundForm" :rules="refundRules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="理由" prop="userName">
              <el-input
                v-model="projectRefundForm.remark"
                placeholder="请输入理由"
                style="width: 222px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退款比例" prop="beChargebackRatio">
              <el-input
                v-model="projectRefundForm.beChargebackRatio"
                placeholder="请输入退款比例"
                style="width: 222px"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form> -->
      <div slot="footer" class="dialog-footer" v-if="commonTitle !== '支付'">
        <el-button type="primary" @click="clickCommonSubmit">确 定</el-button>
        <el-button @click="commonVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 支付弹窗 -->
    <el-dialog :title="payMentTitle" :visible.sync="payMentDialog" width="400px" append-to-body
      :close-on-click-modal="false" @close="payMentClose">
      <div class="payMent">
        <el-form ref="paymentRule" :model="paymentForm" :rules="paymentRule" label-width="100px">
          <el-col :span="24">
            <el-form-item label="客户手机号">
              <p>{{ paymentForm.userPhoneNumber }}</p>
            </el-form-item>
            <el-form-item label="客户姓名">
              <p>{{ paymentForm.userPhoneNumber }}</p>
            </el-form-item>
            <el-form-item label="余额">
              <p>{{ paymentForm.valueCardMoney }}</p>
            </el-form-item>
            <el-form-item label="会员权益">
              <p>{{ paymentForm.isMember }}</p>
            </el-form-item>
            <el-form-item label="订单金额">
              <p>{{ paymentForm.paymentMoney }}</p>
            </el-form-item>
            <el-form-item label="优惠方式" prop="reduced">
              <el-select clearable v-model="paymentForm.reduced" @change="reducedTypeChange">
                <el-option v-for="(item, index) of paymentForm.reducedTypeVoList" :key="index" :label="item.label"
                  :value="item.value">{{ item.label }}
                </el-option>
                <!-- <el-option label="会员权益" value="member">会员权益</el-option>
                <el-option label="储值卡" value="storeCard">储值卡</el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="优惠券">
              <el-select clearable v-model="paymentForm.usedCouponId" @change="changePaymentCoupon">
                <el-option v-for="(item, index) of paymentForm.zyAbleUserCouponVolist" :key="index" :label="item.label"
                  :value="item.value">{{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="优惠金额">
              <p>{{ paymentForm.discountsMoney }}</p>
            </el-form-item>
            <el-form-item label="实付金额">
              <p>{{ paymentForm.actuaryMoney }}</p>
            </el-form-item>
            <el-form-item label="支付方式" prop="paymentType">
              <el-select clearable v-model="paymentForm.paymentType" @change="changePaymentType">
                <el-option v-for="(item, index) of payMentList" :key="index" :label="item.label" :value="item.value">{{
                  item.label }}
                </el-option>
                <!-- <el-option v-if="paymentForm.reduced == '会员权益'" label="现金" value="3">现金</el-option>
                <el-option label="余额" value="5">余额</el-option>
                <el-option v-if="paymentForm.reduced == '会员权益'" label="扫码支付" value="7">扫码支付</el-option>
                <el-option v-if="paymentForm.reduced == '会员权益'" label="团购券" value="8">团购券</el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item v-if="paymentForm.paymentType == '8'" label="团购券码" prop="groupPurchaseId">
              <el-input v-model="paymentForm.groupPurchaseId" placeholder="请输入团购券码"></el-input>
            </el-form-item>
            <el-form-item v-if="paymentForm.paymentType == '7'" label="支付码" prop="payCode">
              <el-input v-model="paymentForm.payCode" placeholder="请输入支付码" @change="setScancode" ref="subCode"
                clearable></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <!-- <div>余额:<span class="word">1548.65</span>元</div>
        <div>会员权益:<span class="word">是</span></div>
        <div>订单金额:<span class="word">89</span>元</div>
        <div>优惠方式:<span class="word">xxx</span></div>
        <div>优惠券:<span class="word">xxx</span></div>
        <div>优惠金额:<span class="word">xxx</span>元</div>
        <div>实付金额:<span class="word">xxx</span>元</div>
        <div>支付方式:<span class="word">xxx</span></div> -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="dialogFooter" @click="submitPayMent">确 定</el-button>
        <el-button @click="payMentClose">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 开包间 -->
    <el-dialog :title="roomTitle" :visible.sync="roomDialog" width="800px" append-to-body :close-on-click-modal="false"
      @close="roomClose">
      <div class="payMent">
        <el-form ref="paymentRule" :model="roomForm" :rules="paymentRule" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="归属区域" prop="regionId">
                <el-select clearable v-model="roomForm.regionId" @change="regionChange">
                  <el-option v-for="(item, index) of regionOption" :key="index" :label="item.label"
                    :value="item.value">{{
                      item.label }}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="归属门店" prop="storeId">
                <el-select clearable v-model="roomForm.storeId" @change="storeIdChange">
                  <el-option v-for="(item, index) of storeOption" :key="index" :label="item.label"
                    :value="item.value">{{
                      item.label }}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户电话" prop="phoneNumber">
                <el-input v-model="roomForm.phoneNumber" placeholder="请输入客户电话" style="width: 222px"
                  @blur="phoneChange" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支付方式" prop="productId" placeholder="请选择支付方式">
                <el-select clearable v-model="roomForm.regionId" @change="regionChange">
                  <el-option v-for="(item, index) of regionOption" :key="index" :label="item.label"
                    :value="item.value">{{
                      item.label }}</el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="时间" prop="productId" placeholder="请选择时间">
                <el-time-picker v-model="roomForm.openingTime" value-format="HH:mm" format="HH:mm" placeholder="起始时间">
                </el-time-picker>
                --
                <el-time-picker v-model="roomForm.closingTime" value-format="HH:mm" format="HH:mm" placeholder="结束时间">
                </el-time-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="选择订单" prop="productId" placeholder="选择订单">
                <el-select clearable v-model="roomForm.regionId" @change="regionChange">
                  <el-option v-for="(item, index) of regionOption" :key="index" :label="item.label"
                    :value="item.value">{{
                      item.label }}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPayMent">确 定</el-button>
        <el-button @click="roomClose">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 支付状态  payStatus  1 未支付  2 已支付 -->
    <!-- 服务状态  status  1 待服务 2 服务中  3 待评价  4  已完成 5 退单 6 取消 -->
    <!-- 客户需求（已确认）：
          待支付、待服务；支付，上钟，修改，删除
          待支付、服务中；支付，下钟，修改、删除
          待支付、待评价；支付、修改、删除
          已支付，待服务，上钟，修改，退单，删除
          已支付、服务中，下钟，修改、退单，删除
          已支付，待评价；退单、修改、删除
          已完成，退单，修改，删除
          已退单，删除 -->
    <!-- 修改订单 -->
    <el-dialog title="修改订单" :visible.sync="updateOrderDialog" width="70%" append-to-body :close-on-click-modal="false"
      @close="updateOrderClose">
      <el-form ref="updateOrder" :model="updateOrderForm" :rules="updateOrderRules" label-width="100px">
        <el-col :span="12">
          <el-form-item label="归属区域" prop="regionName">
            <el-input v-model="updateOrderForm.regionName" disabled style="width: 222px" @blur="phoneChange" />

            <!-- <el-select clearable v-model="updateOrderForm.regionId" @change="regionChange">
              <el-option v-for="(item, index) of regionOption" :key="index" :label="item.label" :value="item.value">{{
                item.label }}
              </el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="归属门店" prop="storeName">
            <el-input v-model="updateOrderForm.storeName" disabled style="width: 222px" @blur="phoneChange" />
            <!-- <el-select clearable v-model="updateOrderForm.storeName" @change="storeIdChange">
              <el-option v-for="(item, index) of storeOption" :key="index" :label="item.label" :value="item.value">{{
                item.label }}
              </el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户电话" prop="phoneNumber">
            <el-input v-model="updateOrderForm.phoneNumber" disabled placeholder="请输入客户电话" style="width: 222px"
              @blur="phoneChange" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称" prop="userName">
            <el-input v-model="updateOrderForm.userName" disabled placeholder="请输入客户名称" style="width: 222px" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目分类" prop="itemTypeName">
            <el-input v-model="updateOrderForm.itemTypeName" disabled placeholder="请输入项目分类" style="width: 222px" />
            <!-- <el-select clearable v-model="projectForm.typeId" @change="typeChange">
              <el-option v-for="(item, index) of pullDown" :key="index" :label="item.label" :value="item.value">{{
                item.label }}
              </el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务项目" prop="itemName" placeholder="请选择服务项目">
            <el-input v-model="updateOrderForm.itemName" disabled style="width: 222px" />

            <!-- <el-select clearable v-model="updateOrderForm.itemName" @change="projectChange">
              <el-option v-for="(item, index) of projectOption" :key="index" :label="item.label" :value="item.value">{{
                item.label }}
              </el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预约时间" prop="subscribeStartTime" placeholder="请选择预约时间">
            <el-date-picker v-model="updateOrderForm.subscribeStartTime" :picker-options="pickerOptions"
              style="width: 240px" type="datetime" :disabled="updateOrderForm.status > 1"
              value-format="yyyy-MM-dd HH:mm" @change="updateOrderTime"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务技师" prop="technicianId" placeholder="请选择服务技师">
            <el-select clearable v-model="updateOrderForm.technicianId" @change="updateOrderTechnician">
              <el-option v-for="(item, index) of technicianOption" :key="index" :label="item.label"
                :disabled="item.status == '休息'" :value="item.value + ''">{{ item.label }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="原服务时间">
            {{ updateOrderForm.subStartTime }}
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateOrderConfirm">确 定</el-button>
        <el-button @click="updateOrderClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchOrderList,
  fetchCustomInfo,
  fetchRegionList,
  fetchStoreList,
  fetchRoomsList,
  fetchProjectList,
  fetchTechnicianList,
  fetchGoodsList,
  fetchCouponList,
  fetchCouponDiscount,
  outOrder,
  outProjectOrder,
  addOrder,
  orderPay,
  deliteorder,
  listorderList,
  listorderPayment,
  countOrder,
  updateOrderItem,
  toPaymentOrder,
  calculatePrice,
  supplementOrder,
  listTypeByStore,
  getRoomList,
  ruleList,
  storeList,
  memberRuleList,
  updateTechAndTime
} from "@/api/system/orderList/order";
import { listpullDownlist } from "@/api/system/projectList/projectList";
// import { format } from "core-js/core/date";
import dayjs from "dayjs";

export default {
  name: "OrderList",
  data() {
    return {
      clickSubmitButton: false, // 支付按钮
      clickSurePayButton: false, // 确定收款
      memberCardNameArr: [], //会员卡信息
      valueCardNameArr: [], //储值卡卡信息
      proItemNameArr: [], //项目名称信息
      couponNameArr: [], //优惠券名称信息
      // websocketDatas:null,
      pickerOptions: {
        disabledDate(time) {
          const now = new Date();
          return time.getTime() < now.getTime();
        },
      },
      dialogFooter: false, // 支付确认按钮
      orderNumber: "",
      orderVisible: false,
      isFocus: false,
      times: `${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`,
      isMember: "",
      orderForm: {
        roomType: "",
        compartmentId: "",
      },
      paymentForm: {
        reduced: null,
        usedCouponId: null,
        paymentType: null,
      },
      paymentRule: {
        paymentType: [
          { required: true, message: "请选择支付方式", trigger: "blur" },
        ],
        reduced: [
          { required: true, message: "请选择优惠方式", trigger: "blur" },
        ],
      },
      orderRules: {
        regionId: [
          { required: true, message: "请选择归属区域", trigger: "blur" },
        ],
        storeId: [
          { required: true, message: "请选择归属门店", trigger: "blur" },
        ],
        phoneNumber: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入有效的手机号",
            trigger: "change",
          },
        ],
        paymentType: [
          { required: true, message: "请选择支付方式", trigger: "change" },
        ],
      },
      payMentList: [
        {
          value: "3",
          label: "现金",
        },
        {
          value: "5",
          label: "余额",
        },
        {
          value: "7",
          label: "扫码支付",
        },
        {
          value: "8",
          label: "团购券",
        },
      ],
      dateRange: [],
      regionOption: [], // 区域下拉框
      storeOption: [], // 门店下拉框
      regionId: "",
      regionName: "",
      storeId: "",
      storeName: "",
      projectForm: {
        typeId: null,
        projectId: null,
        goods: null,
        chooseTime: null,
        technicianId: null,
        projectOption: [],
      },
      searchStoreOption: [],
      projectRules: {
        typeId: [
          { required: true, message: "请选择项目分类", trigger: "blur" },
        ],
        projectId: [
          { required: true, message: "请选择服务项目", trigger: "blur" },
        ],
        chooseTime: [
          { required: true, message: "请选择时间", trigger: "blur" },
        ],
        technicianId: [
          { required: true, message: "请选择服务技师", trigger: "blur" },
        ],
      },
      outRules: {
        beChargebackRatio: [
          { required: true, message: "请输入退款比例", trigger: "change" },
          {
            pattern: /[1-9][0-9]?|100/,
            message: "请输入正确退款比例",
            trigger: "blur",
          },
        ],
      },
      projectRefundForm: {},
      refundRules: {
        beChargebackRatio: [
          { required: true, message: "请输入退款比例", trigger: "change" },
          {
            pattern: /[1-9][0-9]?|100/,
            message: "请输入正确退款比例",
            trigger: "blur",
          },
        ],
      },
      orderSourceList: [
        {
          value: "1",
          label: "线上",
        },
        {
          value: "2",
          label: "线下",
        },
      ],
      projectOption: [], // 项目下拉框
      pullDown: [], //项目分类下拉框
      technicianOption: [], // 技师下拉框
      goodsOption: [], // 附加商品下拉框
      roomOptions: [], // 包间下拉框
      couponOptions: [], // 优惠券下拉框
      nowProjectMoney: 0, // 当前展示的项目金额
      nowGoodsMoney: 0, // 当前展示的附加商品金额
      roomMoney: "", // 包间费用
      couponDiscount: 0,
      zyOrderItemList: [], // 项目列表
      addProVisible: false,
      chooseProject: {}, // 选择的项目
      chooseTechnician: {}, // 选择的技师
      chooseGoods: {}, // 选择的商品
      roomType: "", //房间类型  房间/床位
      chooseRoom: {}, // 选择的包间
      chooseCoupon: null, // 选择的优惠券
      deleteDialog: false,
      deleteItem: {},
      commonVisible: false,
      commonTitle: "",
      zyAbleUserCouponVolist1: [],
      commonItem: null,
      accountConfig: [
        { label: "项目金额", value: "allProjectMoney" },
        { label: "附加商品金额", value: "allGoodsMoney" },
        { label: "包间费用", value: "roomMoney" },
        { label: "订单金额", value: "totalMoney" },

        // { label: '优惠金额', value: 'discountsMoney' },
        // { label: '实付金额', value: 'actuallyMoney' }
      ],
      orderId: "",
      payTypeConfig: {
        // '1': '微信',
        // '2': '支付宝',
        3: "现金",
        // '4': '银行卡',
        5: "余额",
        // '6': '其他',
        7: "扫码支付",
        8: "团购券",
      },
      form: {},
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 门店表格数据
      storeList: [],
      // 弹出层标题
      // 是否显示弹出层
      orderStatus: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        storeName: null,
        storeId: null,
        regionId: null,
        orderNumber: null,
        phoneNumber: null,
        province: null,
        provinceString: null,
        city: null,
        cityString: null,
        county: null,
        countyString: null,
        detail: null,
        intro: null,
        images: null,
        status: null,
        isInitiate: null,
        openingTime: null,
        closingTime: null,
        technicianName: null,
        itemName: null,
        orderSource: null,
        paymentType: null,
        subTimeParam: null,
        serviceTimeParam: null,
        createTimeParam: null,
        paymentTimeParam: null,
      },
      childrenList: [],
      remarked: "",
      pay: [
        { key: 1, value: "未支付" },
        { key: 2, value: "已支付" },
      ],
      state: [
        { key: "", value: "全部" },
        { key: 1, value: "待服务" },
        { key: 2, value: "服务中" },
        { key: 3, value: "待评价" },
        { key: 4, value: "已完成" },
        { key: 5, value: "已退单" },
      ],
      money: [
        { key: 1, value: "微信" },
        { key: 2, value: "支付宝" },
        { key: 3, value: "现金" },
        { key: 4, value: "银行卡" },
        { key: 5, value: "储蓄卡" },
        { key: 6, value: "其他" },
      ],
      cardType: {
        0: "未使用",
        1: "会员卡",
        2: "储蓄卡",
      },
      scanCode: "",
      project: [],
      selectedKey: null,
      childRowData: {},
      timer: null,
      typeId: "",
      payMentDialog: false, //支付弹框
      payMentId: "",
      payMentTitle: "",
      minute: null,
      couponItem: {},
      delIndex: 0,
      roomTitle: "开包间",
      roomDialog: false,
      roomForm: {},
      roomRule: {},
      payParams: {},
      updateOrderDialog: false,
      updateOrderForm: {
        subscribeStartTime: null,
        technicianId: null,
      },
      updateOrderRules: {
        technicianId: [
          { required: true, message: "请选择服务技师", trigger: "blur" },
        ],
        subscribeStartTime: [
          { required: true, message: "请选择预约时间", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    dateFocus() {
      console.log("时间选择聚焦");
      this.times = `${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`;
    },
    allProjectMoney() {
      // 项目金额
      return this.nowProjectMoney || 0;
    },
    allGoodsMoney() {
      // 附加商品金额
      return this.nowGoodsMoney || 0;
    },
    totalMoney() {
      // 订单总金额
      console.log(this.allProjectMoney, this.allGoodsMoney, "000");
      const projectAccount = this.$methods.numberAdd(
        this.allProjectMoney,
        this.allGoodsMoney
      );
      return this.$methods.numberAdd(projectAccount, this.roomMoney);
    },
    discountsMoney() {
      // 优惠金额
      return this.couponDiscount || 0;
    },
    actuallyMoney() {
      // 实付金额
      return this.$methods.numberSub(this.totalMoney, this.discountsMoney);
    },
  },
  watch: {
    "projectForm.typeId": {
      handler: function (newVal) {
        console.log(newVal, "909090");
        if (newVal) {
          const params = {
            typeId: this.typeId,
            storeId: this.storeId,
          };
          this.$nextTick(() => {
            fetchProjectList(params).then((res) => {
              if (res.code !== 200) return;
              this.projectOption = res.rows.map((rItem) => {
                return {
                  ...rItem,
                  label: rItem.itemName,
                  value: rItem.id,
                };
              });
            });
          });
        }
      },
      deep: true,
    },
  },

  created() {
    // this.getOrderList();
    // this.getRegionOption();
    // listpullDownlist().then((res) => {
    //   this.pullDown = res.data.map((rItem) => {
    //     return {
    //       label: rItem.typeName,
    //       value: rItem.id,
    //     };
    //   });
    // });
    // this.getCountOrder()
    // this.timer = setInterval(() => {
    //   this.getCountOrder()
    //   }, 1000*60);
  },
  mounted() {
    let path = this.$route.query;
    console.log(path);

    if (path) {
      this.orderNumber = path.order;
      // this.handleButtonClick(1);
      this.selectedKey = path.orderStatus;
      console.log(this.selectedKey, "this.selectedKey");

      if (path.orderStatus == 5) {
        this.handleButtonClick(path.orderStatus);
      } else {
        this.handleButtonClick(1);
      }
      // this.tableRowGL(this.orderNumber)
    }
    this.getOrderList();
    this.getRegionOption();
    console.log("版本");
  },
  beforeDestroy() { },
  methods: {
    //关闭补单弹窗
    payMentClose() {
      this.payMentDialog = false;
      this.paymentForm = {
        reduced: null,
        usedCouponId: null,
        paymentType: null,
      };
      this.payMentList = [
        {
          value: "3",
          label: "现金",
        },
        {
          value: "5",
          label: "余额",
        },
        {
          value: "7",
          label: "扫码支付",
        },
        {
          value: "8",
          label: "团购券",
        },
      ];
      this.resetForm("paymentRule");
    },
    //补单切换支付方式
    changePaymentType(e) {
      console.log(e, "补单切换支付方式");
      this.$forceUpdate();
      if (e == 7) {
        this.$nextTick(() => {
          this.$refs.subCode.focus();
        });
      }
    },
    //下单选择优惠券
    async changePaymentCoupon(e) {
      console.log(e);
      const params = {
        ...this.paymentForm,
        // userPhoneNumber: this.paymentForm.userPhoneNumber,
        // usedCouponId: this.paymentForm.usedCouponId,
      };
      await this.handleCalculatePrice(params);
    },
    //下单切换会员权益
    async reducedTypeChange(e) {
      console.log(e, "切换优惠方式");
      this.paymentForm.usedCouponId = "";
      let reducedType = 1;
      if (e == "storeCard") {
        reducedType = 2;
        this.payMentList = [
          {
            value: "5",
            label: "余额",
          },
        ];
        this.paymentForm.paymentType = "5";
      } else if (e == "member") {
        reducedType = 1;
        this.payMentList = [
          {
            value: "3",
            label: "现金",
          },
          {
            value: "7",
            label: "扫码支付",
          },
          {
            value: "8",
            label: "团购券",
          },
        ];
      } else {
        this.payMentList = [
          {
            value: "3",
            label: "现金",
          },
          {
            value: "5",
            label: "余额",
          },
          {
            value: "7",
            label: "扫码支付",
          },
          {
            value: "8",
            label: "团购券",
          },
        ];
      }
      const params = {
        ...this.paymentForm,
        // userPhoneNumber: this.paymentForm.userPhoneNumber,
        // usedCouponId: this.paymentForm.usedCouponId,
        reducedType: reducedType,
      };
      console.log(params, "支付表单");
      await this.handleCalculatePrice(params);

      // member 会员权益 2    storeCard 储值卡 3
      if (this.paymentForm.reduced) {
        console.log(this.paymentForm.reduced, "paymentForm.reduced");
        // useType
        if (this.paymentForm.reduced == "member") {
          this.paymentForm.zyAbleUserCouponVolist =
            this.zyAbleUserCouponVolist1.filter(
              (item) => item.useType == "2" || item.useType == "2,3"
            );
        }

        if (this.paymentForm.reduced == "storeCard") {
          this.paymentForm.zyAbleUserCouponVolist =
            this.zyAbleUserCouponVolist1.filter(
              (item) => item.useType == "3" || item.useType == "2,3"
            );
        }
      }
    },
    async handleCalculatePrice(params) {
      delete params.reducedTypeVoList;
      const res = await calculatePrice(params);
      if (res.code == 200) {
        console.log(res);
        res.data.zyAbleUserCouponVolist = res.data.zyAbleUserCouponVolist.map(
          (item) => {
            item.value = item.id;
            item.label = item.name;
            return item;
          }
        );
        // const newForm = JSON.parse(JSON.stringify(this.paymentForm))
        this.paymentForm.actuaryMoney = res.data.actuaryMoney;
        this.paymentForm.discountsMoney = res.data.discountsMoney;
        this.paymentForm.itemId = res.data.itemId;
        this.paymentForm.paymentMoney = res.data.paymentMoney;
        this.paymentForm.userPhoneNumber = res.data.userPhoneNumber;
        this.paymentForm.usedCouponId = res.data.usedCouponId;
        this.paymentForm.valueCardMoney = res.data.valueCardMoney;
      } else {
        this.$message.error(res.msg || "获取实付金额失败");
      }
    },

    openRoom() {
      this.roomDialog = true;
    },

    roomClose() {
      this.roomDialog = false;
    },
    updateOrderConfirm() {
      this.$refs["updateOrder"].validate(async (valid) => {
        if (valid) {
          const params = {
            id: this.updateOrderForm.itemId,
            technicianId: this.updateOrderForm.technicianId,
            subscribeStartTime: this.updateOrderForm.subscribeStartTime,
          };
          updateTechAndTime(params).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.updateOrderDialog = false;
              this.getOrderList()
            }
          })
        }
      })
    },
    updateOrderClose() {
      this.updateOrderForm = {};
      this.updateOrderDialog = false;
    },
    updateOrderTime() {
      this.getTechnicianList(this.updateOrderForm);
    },
    updateOrderTechnician(value) {
      this.updateOrderForm.technicianId = value
      let aa = this.technicianOption.find(
        (item) => item.value == value
      ).serviceEndTime
      console.log(aa, 'aa');

      this.updateOrderForm.subscribeStartTime = new Intl.DateTimeFormat('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      }).format(aa)
        .replace(/\//g, '-')
        .replace(',', '');
      // this.updateOrderForm.technicianId = this.technicianOption.find(
      //   (item) => item.value == value
      // );
    },
    // 关闭付款弹窗
    closeCommonVisible() {
      this.form.payCode = "";
    },
    // 监听扫码枪
    handleScanCode(event) {
      console.log("回车事件--->", event);
      this.$modal.msgSuccess("扫码成功，请点击确认收款");
      this.scanCode = event;
      this.clickSurePay();
    },
    // 补单支付监听扫码枪
    setScancode(e) {
      console.log("回车事件--->", e);
      this.$modal.msgSuccess("扫码成功，请点击确定");
      this.paymentForm.payCode = e;
    },
    // 获取订单数量
    // getCountOrder(){6901236340288

    //   countOrder().then((res)=>{
    //     var total = localStorage.getItem('total')
    //     if(!total){
    //       this.messagePopup()
    //       localStorage.setItem('total', res.data);
    //       this.getOrderList()
    //     }else {
    //       if(total != res.data){
    //       this.messagePopup()
    //       localStorage.setItem('total', res.data);
    //       this.getOrderList()
    //       }
    //     }
    // })
    // },
    // 消息弹框提示
    // messagePopup() {
    //   const h = this.$createElement;
    //   this.$notify({
    //     title: '温馨提示',
    //     message: h('i', { style: 'color: teal'}, '您有新的订单信息')
    //   });
    // },
    feeKeys(value) {
      return this[value];
    },
    // 查询门店列表
    getOrderList() {
      const selectedKey = this.selectedKey;
      this.loading = true;
      const params = {
        ...this.queryParams,
      };
      if (selectedKey == 0) {
        params.payStatus = 1;
      } else {
        params.status = this.orderStatus;
      }
      fetchOrderList(params).then((response) => {
        this.storeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    clickOpenOrder() {
      this.reset();
      this.reset2();
      this.orderVisible = true;
    },
    // 获取归属区域下拉数据
    getRegionOption() {
      fetchRegionList().then((res) => {
        this.regionOption = res.data.map((rItem) => {
          return {
            value: rItem.id,
            label: rItem.regionName,
          };
        });
      });
    },
    // 归属区域切换
    regionChange(value) {
      const selectedOption = this.regionOption.find(
        (item) => item.value === value
      );
      this.regionId = value;
      this.regionName = selectedOption.label;
      if (value) {
        this.orderForm.storeId = "";
      }
      fetchStoreList({ regionId: value }).then((res) => {
        this.storeOption = res.data.map((rItem) => {
          return {
            label: rItem.storeName,
            value: rItem.id,
          };
        });
      });
      this.projectForm = {
        typeId: null,
        projectId: null,
        goods: null,
        chooseTime: null,
        technicianId: null,
        projectOption: [],
      };
      this.zyOrderItemList = [];
      if (this.storeId) {
        // this.getProjectList()
        this.getGoodsList();
      }
    },
    searchRegionChange(value) {
      if (value) {
        this.queryParams.storeId = "";
      }
      fetchStoreList({ regionId: value }).then((res) => {
        this.searchStoreOption = res.data.map((rItem) => {
          return {
            label: rItem.storeName,
            value: rItem.id,
          };
        });
      });
      // this.valueCardNameFun(value)
    },
    async getPulldown(value) {
      console.log(value);
      const res = await listTypeByStore({ storeId: value });
      if (res.code == 200) {
        console.log("门店分类", res);
        this.pullDown = res.data.map((rItem) => {
          return {
            label: rItem.typeName,
            value: rItem.id,
          };
        });
      }
    },
    // 归属门店切换
    storeIdChange(value) {
      console.log("11111111", "切换门店");
      const selectedOption = this.storeOption.find(
        (item) => item.value === value
      );
      this.storeId = value;
      this.storeName = selectedOption.label;
      this.projectForm = {
        typeId: null,
        projectId: null,
        goods: null,
        chooseTime: null,
        technicianId: null,
        projectOption: [],
      };
      this.zyOrderItemList = [];
      this.getRoomsList("");
      this.getPulldown(value);
      if (this.regionId) {
        // this.getProjectList()
        this.getGoodsList();
      }
    },
    // 更新订单信息
    handupdateOrderItem(id, stateVal) {
      const params = {
        id: id,
        status: stateVal,
      };
      updateOrderItem(params).then((res) => {
        if (res.code == 200) {
          this.getOrderList();
        }
      });
    },
    currentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    // 修改订单信息
    handleUpdateOrder(row) {
      this.updateOrderForm = {
        ...row,
        subscribeStartTime: this.currentTime()// row.subStartTime,
      };
      this.updateOrderDialog = true;
      // console.log(this.updateOrderForm, 'this.updateOrderForm');

      this.getTechnicianList(this.updateOrderForm);
    },
    // 获取用户的信息
    phoneChange() {
      if (!(this.regionId && this.storeId))
        return this.$message.error("请先选择归属区域和门店");
      if (this.orderForm.phoneNumber) {
        const params = {
          phoneNumber: this.orderForm.phoneNumber,
          regionId: this.regionId,
          storeId: this.storeId,
        };
        fetchCustomInfo(params).then((res) => {
          this.orderForm = {
            ...this.orderForm,
            userName: res.data.userName,
            memberCardName: res.data.memberCardName,
            valueMoney: res.data.valueMoney,
            memberFlag: res.data.memberFlag ? "1" : "2",
            valueFlag: res.data.valueFlag ? "1" : "2",
          };
        });
      }
    },
    //项目分类change事件
    typeChange(value) {
      this.typeId = value;
      this.projectForm.projectId = "";
      this.projectOption = [];
      // this.getProjectList()
    },
    // 获取服务项目下拉
    // getProjectList() {
    //   const params = {
    //     storeId: this.storeId,
    //     typeId:this.typeId
    //   }
    //   fetchProjectList(params).then(res => {
    //     if (res.code !== 200) return
    //     this.projectOption = res.rows.map(rItem => {
    //       return {
    //         ...rItem,
    //         label: rItem.itemName,
    //         value: rItem.itemId
    //       }
    //     })
    //   })
    // },
    // 获取技师下拉
    getTechnicianList(data) {
      console.log(data, 'data');
      let chooseDate = data.chooseTime?.split(" ")[0] ||
        data.subscribeStartTime?.split(" ")[0] || data.subStartTime?.split(" ")[0]
      let chooseTime = data.chooseTime?.split(" ")[1] ||
        data.subscribeStartTime?.split(" ")[1] || data.subStartTime?.split(" ")[1]
      const params = {
        isScheduling: 1, // 正常上班，非休息
        itemStoreId: this.chooseProject.id || data.storeItemId,
        date: chooseDate,
        subscribeTechnicianDtoList: this.zyOrderItemList,
        time: chooseTime,
      };

      fetchTechnicianList(params).then((res) => {
        if (res.code !== 200) return;
        this.technicianOption = res.rows.map((rItem) => {
          let minute = rItem.serviceEndTime
            ? Math.round(
              (Number(rItem.serviceEndTime) -
                Date.parse(chooseDate + ' ' + chooseTime)) /
              1000 /
              60
            )
            : 0;
          if (minute < 60) {
            minute = `${minute} 分钟`;
          } else if (minute < 1440) {
            const hours = Math.floor(minute / 60);
            const remainingMinutes = minute % 60;
            minute = `${hours} 小时 ${remainingMinutes} 分钟`;
          } else {
            const days = Math.floor(minute / 1440);
            const remainingMinutes = minute % 1440;
            const hours = Math.floor(remainingMinutes / 60);
            const finalMinutes = remainingMinutes % 60;
            minute = `${days} 天 ${hours} 小时 ${finalMinutes} 分钟`;
          }
          return {
            ...rItem,
            label:
              rItem.status == "休息"
                ? `${rItem.jobNumber}号${rItem.name}/休息中`
                : `${rItem.jobNumber}号${rItem.name}/需等待${minute}`,
            value: rItem.id,
            minute,
            serviceEndTime: rItem.serviceEndTime ? rItem.serviceEndTime : null,
          };
        });
      });
    },
    // 获取附加商品列表
    getGoodsList() {
      const params = {
        storeId: this.storeId,
      };
      fetchGoodsList(params).then((res) => {
        if (res.code !== 200) return;
        this.goodsOption = res.data.map((rItem) => {
          return {
            ...rItem,
            label: rItem.productName,
            value: rItem.id,
          };
        });
      });
    },
    // 选择项目按钮点击
    clickChooseProject() {
      if (!(this.regionId && this.storeId))
        return this.$message.error("请先选择归属区域和门店");
      this.getProjectList();
      this.getGoodsList();
      this.addProVisible = true;
    },
    // 项目切换
    projectChange(value) {
      console.log(value, "项目切换", this.projectOption);
      this.chooseProject = this.projectOption.find(
        (item) => item.value === value
      );
      this.projectForm.chooseTime = this.currentTime();
      this.chooseTimeChange(this.projectForm.chooseTime)
    },
    // 商品切换
    goodsChange(value) {
      this.chooseGoods = this.goodsOption.find((item) => item.value === value);
    },
    chooseTimeChange(value) {
      console.log(value, "选择时间");
      // const hours = new Date().getHours();
      // const minutes = new Date().getMinutes();
      // const seconds = new Date().getSeconds();
      // this.times = `${hours}:${minutes}:${seconds}`
      //  alert( this.projectForm.chooseTime);
      this.getTechnicianList(this.projectForm);
    },
    // 技师切换
    technicianChange(value) {
      this.chooseTechnician = this.technicianOption.find(
        (item) => item.value === value
      );
    },
    // 添加项目
    clickAddProject() {
      this.orderForm.roomType = "";
      this.orderForm.compartmentId = "";
      if (!(this.regionId && this.storeId))
        return this.$message.error("请先选择归属区域和门店");
      this.$refs["projectFormRef"].validate((valid) => {
        if (!valid) return this.$message.error("请将表单数据填写完整");
        const duration = this.chooseProject.duration;
        const startTime = this.projectForm.chooseTime.split(" ")[1];
        let [hours, minutes, seconds] = startTime.split(":").map(Number);
        const nowMinute = hours * 60 + minutes;
        const endTotalMinute = nowMinute + duration;
        const endHours = Math.floor(endTotalMinute / 60);
        const endMinutes = endTotalMinute % 60;
        // 格式化小时和分钟
        const formattedHours = String(endHours).padStart(2, "0");
        const formattedMinutes = String(endMinutes).padStart(2, "0");
        // alert(this.projectForm.chooseTime);
        const serviceEndTimeParam =
          this.technicianOption.filter(
            (item) => item.id == this.chooseTechnician.id
          )[0].serviceEndTime || Date.parse(this.projectForm.chooseTime);
        this.zyOrderItemList.unshift({
          id: this.chooseProject.id,
          itemTypeId: this.chooseProject.typeId,
          typeName: this.chooseProject.typeName,
          itemId: this.chooseProject.itemId,
          itemName: this.chooseProject.itemName,
          technicianId: this.chooseTechnician.id,
          technicianName: this.chooseTechnician.name,
          firstSelected: hours + ":" + minutes,
          lastSelected: formattedHours + ":" + formattedMinutes,
          // subscribeStartTime: this.projectForm.chooseTime,
          subscribeStartTime: new Date(serviceEndTimeParam)
            .toLocaleString()
            .replaceAll("/", "-"),
          subscribeEndTime: new Date(serviceEndTimeParam + duration * 60 * 1000)
            .toLocaleString()
            .replaceAll("/", "-"),
          paymentMoney: this.chooseProject.price,
          zyOrderProductList: this.projectForm.goods
            ? [
              {
                productId: this.chooseGoods.id,
                productName: this.chooseGoods.productName,
                originalPrice: this.chooseGoods.originalPrice,
              },
            ]
            : null,
        });
        this.nowProjectMoney = this.$methods.numberAdd(
          this.nowProjectMoney,
          Number(this.chooseProject.price)
        );
        this.nowGoodsMoney = this.$methods.numberAdd(
          this.nowGoodsMoney,
          Number(this.chooseGoods.originalPrice)
        );
        this.projectForm = {
          ...this.projectForm,
          goods: null,
          chooseTime: null,
          technicianId: null,
        };
        this.getCouponList();
      });
    },
    // 删除项目
    clickDeleteProject(item, index) {
      this.commonVisible = true;
      this.delIndex = index;
      this.commonTitle = "删除项目";
      this.commonItem = item;
      this.getCouponList();
    },
    // 确认删除
    clickConfirmDelete() {
      this.zyOrderItemList.splice(this.delIndex, 1);
      // this.zyOrderItemList = this.zyOrderItemList.filter(cItem => cItem.technicianId !== this.commonItem.technicianId)

      this.nowProjectMoney = this.$methods.numberSub(
        this.nowProjectMoney,
        Number(this.commonItem.paymentMoney)
      );
      if (this.commonItem.zyOrderProductList) {
        this.nowGoodsMoney = this.$methods.numberSub(
          this.nowGoodsMoney,
          Number(this.commonItem.zyOrderProductList[0].originalPrice)
        );
      }
      this.orderForm.roomType = "";

      this.commonVisible = false;
    },
    getCouponList() {
      this.couponOptions = [];

      const params = {
        storeId: this.storeId,
        phonenumber: this.orderForm.phoneNumber,
        projectIds: this.zyOrderItemList.map((item) => item.id),
        fullAmount: this.totalMoney,
        useType: this.orderForm.discountType,
        callAddress: 1,
      };
      fetchCouponList(params).then((res) => {
        if (res.code !== 200 || !(res.data && res.data.length)) return;
        this.couponOptions = res.data.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
        console.log(this.couponOptions, "this.couponOptions");
      });
    },
    confirmProject() {
      this.addProVisible = false;
      this.projectForm = {};
    },
    //项目弹框关闭事件
    projectClose() {
      this.projectForm = {};
    },
    //开单弹框关闭事件
    orderClose() {
      this.form.payCode = "";
      this.orderForm = {
        roomType: "",
        compartmentId: "",
      };
      this.projectForm = {};
      this.projectOption = [];
      this.zyOrderItemList = [];
      (this.payMentList = [
        {
          value: "3",
          label: "现金",
        },
        {
          value: "5",
          label: "余额",
        },
        {
          value: "7",
          label: "扫码支付",
        },
        {
          value: "8",
          label: "团购券",
        },
      ]),
        (this.nowProjectMoney = 0);
      this.nowGoodsMoney = 0;
      this.roomMoney = "";
      this.couponDiscount = 0;
      this.reset();
      this.reset2();
    },
    // 是否需要包间切换
    needRoomChange(value) {
      console.log(value);
      this.roomType = value;
      this.orderForm.compartmentId = "";
      if (value === "1") {
        this.getRoomsList("1");
      } else {
        this.getRoomsList("2");
        this.orderForm.compartmentId = null;
        this.chooseRoom = {};
        this.roomMoney = 0;
      }
    },
    // 导出

    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "/system/order/export",
        {
          ...this.queryParams,
        },
        `订单列表_${new Date().getTime()}.xlsx`
      );
    },

    // 获取包间列表
    getRoomsList(val) {
      if (!this.storeId) return;
      console.log(this.zyOrderItemList, "zyOrderItemList");

      const params = {
        storeId: this.storeId,
        bedNumber:
          new Set(this.zyOrderItemList.map((item) => item.technicianId)).size ||
          0,
        roomType: val,
      };
      getRoomList(params).then((res) => {
        if (res.code !== 200) return;
        this.roomOptions = res.rows.map((rItem) => {
          return {
            ...rItem,
            label: rItem.compartmentName,
            value: rItem.id,
          };
        });
      });
    },
    // 选择包间
    roomChange(value) {
      if (!value) this.roomMoney = 0;
      const roomSelect = this.roomOptions.find(
        (oItem) => oItem.value === value
      );

      this.chooseRoom = roomSelect;
      if (this.orderForm.roomType == 1) {
        this.roomMoney = roomSelect.privateRoomPrice;
      } else {
        this.roomMoney =
          roomSelect.price *
          new Set(this.zyOrderItemList.map((item) => item.technicianId))
            .size || 0;
      }
      // this.roomMoney = roomSelect.price
      // this.roomMoney = roomSelect.privateRoomPrice
    },
    // 获取会员和储值折扣价
    getDiscount(value) {
      // const zyOrderProductList = [];
      const zyOrderItemList = this.zyOrderItemList.map((item) => {
        // if (item.zyOrderProductList) {
        //   zyOrderProductList.push(...item.zyOrderProductList);
        // }
        return {
          itemId: item.itemId,
          technicianId: item.technicianId,
          subscribeStartTimeString: item.subscribeStartTime,
          paymentMoney: item.paymentMoney,
          zyOrderProductList: item.zyOrderProductList,
        };
      });

      const params = {
        phoneNumber: this.orderForm.phoneNumber,
        regionId: this.regionId,
        regionName: this.regionName,
        storeId: this.storeId,
        storeName: this.storeName,
        isMember: this.orderForm.discountType === "member" ? "1" : "2",
        compartmentId: this.chooseRoom.id,
        compartmentName: this.chooseRoom.compartmentName,
        compartmentMoney: this.roomMoney,
        isValue: this.orderForm.discountType === "storeCard" ? "1" : "2",
        useInterestsType: 0,
        itemCoupon: value || null,
        zyOrderItemList,
      };
      // params.zyOrderItemList.forEach((element) => {
      //   element.zyOrderProductList = zyOrderProductList;
      // });
      fetchCouponDiscount(params).then((res) => {
        if (res.code !== 200) return;
        this.couponDiscount = res.data.discount || 0;
        this.couponItem = res.data;
      });
    },
    // 切换优惠方式
    discountTypeChange(e) {
      // if (this.orderForm.compartmentId == "") {
      //   this.$message.error("请先选择包间");
      //   this.orderForm.discountType = null;
      //   return;
      // }
      if (e == "storeCard") {
        this.payMentList = [
          {
            value: "5",
            label: "余额",
          },
        ];
        this.orderForm.paymentType = "5";
      } else if (e == "member") {
        this.payMentList = [
          {
            value: "3",
            label: "现金",
          },
          // {
          //   value: "5",
          //   label: "余额",
          // },
          {
            value: "7",
            label: "扫码支付",
          },
          {
            value: "8",
            label: "团购券",
          },
        ];
        this.orderForm.paymentType = "3";
      } else if (e == "") {
        this.payMentList = [
          {
            value: "3",
            label: "现金",
          },
          {
            value: "7",
            label: "扫码支付",
          },
          {
            value: "8",
            label: "团购券",
          },
        ];
        this.orderForm.paymentType = "3";
      } else {
        this.payMentList = [
          {
            value: "3",
            label: "现金",
          },
          {
            value: "5",
            label: "余额",
          },
          {
            value: "7",
            label: "扫码支付",
          },
          {
            value: "8",
            label: "团购券",
          },
        ];
        this.orderForm.paymentType = "3";
      }
      this.orderForm.itemZyUserCouponId = "";

      this.getDiscount(this.chooseCoupon);
      this.getCouponList();
    },
    // 选择优惠券
    couponChange(value) {
      this.chooseCoupon = value;
      this.getDiscount(value);
    },
    // 稍后支付
    laterSubmit() {
      console.log(this.orderForm, "paymentType");

      this.$refs["orderFormRef"].validate((valid) => {
        if (!valid) return this.$message.error("请将表单数据填写完整");
        if (!this.zyOrderItemList.length)
          return this.$message.error("请选择服务项目");
        const params = {
          regionId: this.regionId,
          regionName: this.regionName,
          storeId: this.storeId,
          storeName: this.storeName,
          phoneNumber: this.orderForm.phoneNumber,
          userName: this.orderForm.userName,
          isMember: this.orderForm.discountType === "member" ? "1" : "2",
          roomType: this.roomType,
          compartmentId: this.chooseRoom.id,
          compartmentName: this.chooseRoom.compartmentName,
          compartmentMoney: this.roomMoney,
          isValue: this.orderForm.discountType === "storeCard" ? "1" : "2",
          itemMoney: this.allProjectMoney, // 项目金额
          actuallyMoney: this.actuallyMoney, // 实付金额
          discountsMoney: this.discountsMoney,
          itemZyUserCouponId: this.orderForm.itemZyUserCouponId,
          zyOrderItemList: this.$utils.deepClone(this.zyOrderItemList),
          valuecardId: this.couponItem.valuecardId,
          memberId: this.couponItem.memberId,
        };
        addOrder(params).then((res) => {
          if (res.code !== 200) return;
          console.log("稍后支付", this.orderForm);
          this.$message.success(res.msg || "下单成功");
          this.payInfoDialog = false;
          this.payDialog = false;
          this.orderVisible = false;
          this.getOrderList();
        });
      });
    },
    // 提交按钮(立即支付)
    clickSubmit() {
      this.$refs["orderFormRef"].validate((valid) => {
        if (!valid) return this.$message.error("请将表单数据填写完整");
        if (!this.zyOrderItemList.length)
          return this.$message.error("请选择服务项目");
        this.clickSubmitButton = true;
        this.payParams = {
          isPayNow: 1,
          regionId: this.regionId,
          regionName: this.regionName,
          storeId: this.storeId,
          storeName: this.storeName,
          phoneNumber: this.orderForm.phoneNumber,
          userName: this.orderForm.userName,
          isMember: this.orderForm.discountType === "member" ? "1" : "2",
          roomType: this.roomType,
          compartmentId: this.chooseRoom.id,
          compartmentName: this.chooseRoom.compartmentName,
          compartmentMoney: this.roomMoney,
          isValue: this.orderForm.discountType === "storeCard" ? "1" : "2",
          itemMoney: this.allProjectMoney, // 项目金额
          actuallyMoney: this.actuallyMoney, // 实付金额
          discountsMoney: this.discountsMoney,
          itemZyUserCouponId: this.orderForm.itemZyUserCouponId,
          zyOrderItemList: this.$utils.deepClone(this.zyOrderItemList),
          valuecardId: this.couponItem.valuecardId,
          memberId: this.couponItem.memberId,
        };
        addOrder(this.payParams).then((res) => {
          if (res.code !== 200) return;
          console.log("当前支付方式", this.orderForm);
          this.orderId = res.data.id;
          this.commonTitle = "支付";
          this.commonVisible = true;
          this.clickSubmitButton = false;
          if (this.orderForm.paymentType == "7") {
            this.$nextTick(() => {
              this.$refs.code.focus();
            });
          }
          this.payInfoDialog = false;
          this.payDialog = false;
        });
      });
    },
    // 确定支付
    clickSurePay() {
      this.clickSurePayButton = true;
      let params = {
        // id: this.orderId,
        paymentType: this.orderForm.paymentType,
        payCode: this.scanCode,
        ...this.payParams,
      };
      if (this.orderForm.paymentType === "8") {
        params = {
          ...params,
          groupPurchaseId: this.orderForm.groupPurchaseId,
          groupPurchaseMoney: this.orderForm.groupPurchaseMoney,
          payCode: this.scanCode,
        };
      }
      orderPay(params).then((res) => {
        this.clickSurePayButton = false;
        try {
          if (res.code !== 200) return;
          this.orderVisible = false;
          this.commonVisible = false;
          this.getOrderList();
        } catch (error) {
          console.log(error);
          this.scanCode = "";
          this.$nextTick(() => {
            this.$refs.code.focus();
          });
        }
      });
    },
    // 取消
    clickCancel() {
      this.orderVisible = false;
      this.orderForm = {
        roomType: "",
        compartmentId: "",
      };
      this.zyOrderItemList = [];
      this.projectOption = [];
      this.reset();
      this.reset2();
    },
    clickOutOrder(row) {
      this.commonItem = row;
      console.log(this.commonItem, "90909090");
      this.commonTitle = "退单";
      this.commonVisible = true;
      this.reset();
      this.reset2();
      this.getOrderList();
    },
    // 项目退单
    clickOutProject(row) {
      this.commonItem = row;
      this.commonTitle = "项目退单";
      this.commonVisible = true;
    },
    // 公共弹窗确认事件（退单、确认删除）
    clickCommonSubmit() {
      if (this.commonTitle === "删除项目") {
        this.clickConfirmDelete();
      }

      if (this.commonTitle === "退单") {

        if (this.form.beChargebackRatio) {

        } else {
          this.$modal.msgError("退单比例不能为空");
          return;
        }
        const params = {
          // ...this.projectRefundForm,
          //  ...this.form,
          itemId: this.commonItem.itemId,
          remark: this.remarked,
          beChargebackRatio: this.form.beChargebackRatio,
        };
        console.log(params, "888888");
        outProjectOrder(params).then((res) => {
          if (res.code == 200) {
            this.commonVisible = false;
            this.remarked = "";
            this.$modal.msgSuccess("退单成功");
            this.getOrderList();
          }
        });
      }
      // if (this.commonTitle === '退单') {
      //   const params = {
      //     ...this.form,
      //     itemId: this.commonItem.itemId,
      //     remark: this.remarked
      //   }
      //   outOrder(params).then((res) => {
      //     if (res.code == 200) {
      //       this.commonVisible = false
      //       this.remarked = ""
      //       this.$modal.msgSuccess("退单成功")
      //       this.getOrderList()
      //     }
      //   })
      // }
    },

    //待支付按钮
    buttonClick(val) {
      this.selectedKey = val;
      console.log(val, "0000");
      const params = {
        ...this.queryParams,
        payStatus: 1,
      };
      fetchOrderList(params).then((response) => {
        this.storeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleButtonClick(key) {
      this.selectedKey = key;
      this.orderStatus = key;
      console.log(this.selectedKey, "this.selectedKey");

      this.loading = true;
      const params = {
        ...this.queryParams,
        status: this.orderStatus,
      };
      fetchOrderList(params).then((response) => {
        this.storeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //待支付数据列表高亮
    tableRowClassName({ row, rowIndex }) {
      if (row.payStatus == 1) {
        return "warning-row";
      }
      if (this.orderNumber) {
        if (row.id == this.orderNumber) {
          return "success-row";
        }
      }
      return "";
      // if (rowIndex === 1) {
      //   return 'warning-row';
      // } else if (rowIndex === 3) {
      //   return 'success-row';
      // }
      // return '';
    },
    handleExpandChange(row) {
      // 获取展开行的ID
      const id = row.id;
      listorderList({ orderId: row.id }).then((res) => {
        console.log(res);
        res.rows.forEach((row) => {
          let totalPrice = row.zyOrderProductList.reduce(
            (total, item) =>
              total + parseInt(item.originalPrice) * parseInt(item.productNum),
            0
          );
          // 将总价赋值给每个对象的 productMoney 字段
          row.productMoney = parseInt(totalPrice);
        });
        this.childRowData = {
          ...this.childRowData,
          [row.id]: res.rows,
        };
      });
      console.log(id, 123);
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        storeName: null,
        phoneNumber: null,
        province: null,
        provinceString: null,
        city: null,
        cityString: null,
        county: null,
        countyString: null,
        detail: null,
        intro: null,
        images: null,
        status: null,
        isInitiate: null,
        openingTime: null,
        closingTime: null,
        createTime: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    // 表单重置
    reset2() {
      this.projectForm = {
        typeId: null,
        projectId: null,
        goods: null,
        chooseTime: null,
        technicianId: null,
      };
      this.resetForm("projectForm");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getOrderList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    async handReset(row) {
      const data = {
        itemId: row.itemId,
        storeId: row.storeId,
        userPhoneNumber: row.phoneNumber,
        orderId: row.id,
      };
      const res = await toPaymentOrder(data);
      console.log(res, "222222222222");
      if (res) {
        res.data.zyAbleUserCouponVolist = res.data.zyAbleUserCouponVolist.map(
          (item) => {
            item.value = item.id;
            item.label = item.name;
            return item;
          }
        );
        this.zyAbleUserCouponVolist1 = res.data.zyAbleUserCouponVolist;
        res.data.reducedTypeVoList = res.data.reducedTypeVoList.map((item) => {
          if (item.value == 1) {
            item.value = "member";
            item.label = "会员权益";
          } else {
            item.value = "storeCard";
            item.label = "储值卡";
          }
          return item;
        });
        this.paymentForm = { ...res.data };
        this.payMentId = row.id;
        this.payMentTitle = "支付";
        this.payMentDialog = true;
      }
      // this.$modal
      //   .confirm("是否确认该订单金额为" + money + "的项支付成功？")
      //   .then(function () {
      //     return listorderPayment({ id: ids });
      //   })
      //   .then(() => {
      //     this.getOrderList();
      //     this.$modal.msgSuccess("支付成功");
      //   })
      //   .catch(() => {});
    },
    async submitPayMent() {
      console.log("点击支付确定");
      this.dialogFooter = true;
      const params = {
        id: this.paymentForm.itemId,
        paymentMoney: this.paymentForm.actuaryMoney,
        paymentType: this.paymentForm.paymentType,
        groupPurchaseId: this.paymentForm.groupPurchaseId || "",
        payCode: this.paymentForm.payCode || "",
        // storeId: 176
      };
      if (
        this.orderForm.paymentType == 8 &&
        (this.orderForm.groupPurchaseId == "" ||
          !this.orderForm.groupPurchaseId)
      ) {
        this.$message.error("团购券码不能为空！");
      } else if (
        this.orderForm.paymentType == 7 &&
        (this.orderForm.payCode == "" || !this.orderForm.payCode)
      ) {
        this.$message.error("支付码不能为空！");
      } else if (
        this.orderForm.paymentType == 7 &&
        (this.orderForm.payCode == "" || !this.orderForm.payCode)
      ) {
        this.$message.error("支付码不能为空！");
      } else {
        this.dialogFooter = false;
        this.$refs["paymentRule"].validate(async (valid) => {
          if (!valid) return;
          supplementOrder(params).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("支付成功");
              this.payMentDialog = false;
              this.getOrderList();
              // this.tableRowClassName
            } else {
              this.$message.error(res.msg || "");
            }
          });
        })
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除编号为"' + ids + '"的数据项？')
        .then(function () {
          return deliteorder(ids);
        })
        .then(() => {
          this.getOrderList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    //门店切换
    async searchStoreIdFun(value) {
      console.log(value, "value1111111111");

      this.couponNameFun(value);
      this.proItemNameFun(value);
      this.memberCardNameFun(value);
    },
    //优惠券下拉
    async couponNameFun(value) {
      couponNameArr;
    },
    //项目下拉
    async proItemNameFun(value) {
      const res = await storeList({ storeId: value });
      if (res.code == 200) {
        this.proItemNameArr = res.data.map((rItem) => {
          return {
            label: rItem.typeName,
            value: rItem.id,
          };
        });
      }
    },
    //储值卡下拉
    async valueCardNameFun(value) {
      const res = await ruleList({ regionId: value, status: 1 });
      if (res.code == 200) {
        this.valueCardNameArr = res.rows.map((rItem) => {
          return {
            label: rItem.ruleName,
            value: rItem.id,
          };
        });
      }
    },
    //会员卡
    async memberCardNameFun(value) {
      const res = await memberRuleList({ regionId: value, status: 1 });
      if (res.code == 200) {
        this.memberCardNameArr = res.data.map((rItem) => {
          return {
            label: rItem.ruleName,
            value: rItem.id,
          };
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.column-center {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.project-form {
  width: 84%;
  margin: auto;
}

.add-project-btn {
  margin: 0 0 20px 210px;
  text-align: left;
}

.confirm-project {
  text-align: right;

  .confirm-project {
    margin-top: 20px;
  }
}

.project-list {
  .project-item {
    width: 400px;
    padding: 15px 30px;
    margin: 0 90px 10px;
    border-radius: 8px;
    background-color: #eef0f3;

    .common-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .delete-box {
      text-align: right;
    }
  }
}

.account-box {
  width: 280px;
  padding: 15px 30px;
  margin: 10px 0 10px 98px;
  border-radius: 8px;
  background-color: #eef0f3;

  .account-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 16px;
  }
}

.pay-box {
  text-align: center;

  .pay-item {
    margin-bottom: 10px;
  }
}

.el-col--right {
  display: flex;
  justify-content: flex-end;
  margin-right: 0px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.title {
  display: flex;
}

.title-item {
  width: 80px;
  height: 30px;
  margin: 8px;
  text-align: center;
  line-height: 30px;
  background-color: grey;
  border: 1px solid #fff;
  border-radius: 6px;
  color: #fff;
}

.project {
  /* width:300px; */
  height: 200px;
  background-color: grey;
  /* padding:16px */
}

.dialog-footer {
  text-align: center;
}

.free-cell {
  background-color: white;
}

.busy-cell {
  background-color: #c74336b3;
  color: #fff;
}

.box-flex {
  display: flex;
}

.selected-cell {
  background-color: #c74336b3;
  color: #fff;
}

::v-deep .warning-row {
  background: oldlace !important;
}

::v-deep .success-row {
  background: #d3eeee !important;
}

.payMent {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  margin-top: -20px;

  p {
    margin: 0 !important;
    padding: 0 !important;
  }
}

.word {
  margin-left: 20px;
}
</style>
